<template>
  <view class="list flex-direction-column">
    <view class="item flex-space-between" v-for="item in props.list" :key="item.id" @click="itemClick(item.state)">
      <image class="pic" mode="aspectFill" :src="item.cover"></image>
      <view class="desc flex-direction-coulumn">
        <view class="title two-line">{{ item.name }}</view>
        <view class="time flex-direction-column">
          <view class="t-item flex">
            <image src="/static/icon/06.png"></image>
            <text>{{ item.province }}·{{ item.city }}</text>
          </view>
          <view class="t-item flex">
            <image src="/static/icon/05.png"></image>
            <text>{{ item.start_time }}</text>
          </view>
        </view>
        <view class="btn" :style="getTicketsStyle(item)">{{ getTicketsText(item) }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { Tlist } from '@/typings/list'
import tools from '@/utils/tools'
import statusHooks from '@/hooks/status'
let { getTicketsText, getTicketsStyle } = statusHooks()
const props = defineProps({
  list: {
    type: Array as PropType<Tlist['item'][]>
  }
})

const itemClick = (state: number) => {
  if (state == 2) return tools.showToast('已结束')
  tools.scanCode().then((res) => {
    tools.navTo('/pagesA/mine/result?id=' + res)
  })
}
</script>

<style lang="scss" scoped>
.list {
  padding: 20rpx 24rpx;
  .item {
    padding-bottom: 32rpx;
    margin-bottom: 34rpx;
    border-bottom: 1px solid #eee;
    &:last-child {
      margin-bottom: 0;
    }
    .pic {
      width: 280rpx;
      height: 184rpx;
      border-radius: 6rpx;
    }
    .desc {
      flex: 1;
      height: 184rpx;
      margin-left: 20rpx;
      position: relative;
      .title {
        width: 400rpx;
        height: 88rpx;
        font-size: 32rpx;
        line-height: 44rpx;
      }
      .time {
        margin-top: 16rpx;
        .t-item {
          image {
            width: 25rpx;
            height: 25rpx;
            margin-right: 10rpx;
          }
          text {
            height: 44rpx;

            font-size: 24rpx;
            line-height: 44rpx;
            color: #777777;
          }
        }
      }
      .btn {
        right: 0;
        bottom: 0;
        position: absolute;
        width: 144rpx;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;

        border-radius: 30rpx;
      }
    }
  }
}
</style>
